<template>
	<div class="page-login-index">
        <div class="backgroudnIcon">
            <div class="name">欢迎登录!</div>
            <div class="form-wrapper">
                
                <div class="row">
                    <input type="number" class="input" v-model="formData.mobile" maxlength="11" placeholder="输入手机号"
                    @input="handlePhoneChange">
                </div>
                <div class="row ml-cf">
                    <input type="number" class="input valid ml-fl" maxlength="6" v-model="formData.verify_code"
                        placeholder="验证码" placeholder-class="ml-input-placeholder" @input="validSubmitBtnFlag">
                    <div class="send-btn ml-fr active" v-if="sendCodeMessageFlag">倒计时 {{remainTime+'s'}}</div>
                    <div class="send-btn ml-fr" :class="{'active': phoneValidFlag}" v-else @click="getMsgCode">
                        {{sendCodeMessageForbidFlag ? '重新发送' : '获取验证码'}}</div>
                </div>
                <div class="row">
                    <div id="valid-item"></div>
                </div>
                <div class="login-btn" :class="{'active': submitBtnFlag }" @click="login"><span class="login-loading" v-if="submitPendingFlag" />
                    <img src="@assets/img/loginBtn.png"
                    class="loginIcon">
                    <div style="width:112px;">登录</div>
                </div>
                <!-- <div class="agreement-wrapper">
                    <img v-if="agreementFlag" @click="toggleAgreement"
                        src="../../assets/img/argeeYe.png"
                        class="check">
                    <img v-else @click="toggleAgreement"
                        src="../../assets/img/argeeIcon.png"
                        class="check">
                    <div class="ml-inline">我已阅读并同意 <span class="rule" @click="jump2agreement('/service')">用户服务协议</span> 和 <span
                            class="rule" @click="jump2agreement('/privacy')">用户隐私协议</span></div>
                </div> -->
            </div>
        </div>
        

	</div>
</template>

<script>
export default {
	data() {
		return {
			formData: {
				mobile: "",
				verify_code: "",
			},
			phoneValidFlag: false,
			sendCodeMessageForbidFlag: false,
			sendCodeMessageFlag: false,
			remainTime: 59,
			timer: null,
			agreementFlag: true,
			submitBtnFlag: false,
			submitPendingFlag: false,
		};
	},
	watch: {
		$route: {
			handler: function(route) {
				this.redirect = route.query && route.query.redirect
			},
			immediate: true
		}
	},
	methods: {
		_clearTimer() {
			clearInterval(this.timer);
			this.sendCodeMessageFlag = false;
			this.sendCodeMessageForbidFlag = false;
		},
		handlePhoneChange(e) {
      this.formData.mobile = this.formData.mobile.slice(0,11)
			this.phoneValidFlag = this.$util._limitPhone(this.formData.mobile);
			this.validSubmitBtnFlag();
			this._clearTimer();
		},
		getMsgCode() {
			if (!this.phoneValidFlag) return;
			if (this.sendCodeMessageFlag || this.sendCodeMessageForbidFlag) {
				this.$toast("发送中...");
				return;
			}
			this.sendCodeMessageForbidFlag = true;
			this.$http.post(this.$api.getMsgCode, this.formData).then((res) => {
					if (res.code == 200) {
						this.$toast("发送成功");
						this.remainTime = 59;
						this.sendCodeMessageFlag = true;
						this.timer = setInterval(() => {
							this.remainTime--;
							if (this.remainTime < 1) this._clearTimer();
						}, 1000);
					}else{
						this.$toast(res)
					}
					this.sendCodeMessageForbidFlag = false;
				})
				.catch(() => {
					this._clearTimer();
				});
		},
		validSubmitBtnFlag() {
      this.formData.verify_code = this.formData.verify_code.slice(0,6)
			this.submitBtnFlag =
				this.phoneValidFlag &&
				this.formData.verify_code.trim().length > 0 && this.agreementFlag;
		},
		toggleAgreement() {
			this.agreementFlag = !this.agreementFlag;
			this.validSubmitBtnFlag();
		},
		jump2agreement(path) {
			this.$router.push({
				path,
			});
		},
		login() {

            var code = this.$util.getQueryName('code');

            console.log('code',code);

            this.formData.code = code;
			if (!this.submitBtnFlag || this.submitPendingFlag) return;
			this.submitPendingFlag = true
			this.$http
				.post(this.$api.login, this.formData)
				.then((res) => {
					console.log('--------------------res',res)
					if (res.code == 200) {
                        this.$storage.set('token',res.data.token);
                        this.$storage.set('ML_USER_INFO',res.data);
						// let path = `/health-doc?phone=${this.formData.mobile}`
                        
                        console.log('this.$route.query.redirect',this.$route.query.redirect);

                        // window.location.href= decodeURIComponent(window.location.href.split('redirect=')[1])
                         console.log('this.$route',this.$route);

						if(this.$util.isURL(this.$route.query.redirect)) {
                            
							window.location.href= decodeURIComponent(window.location.href.split('redirect=')[1])
						}else{
							this.$router.push({
								path: this.redirect
							})
						}
						
					}else{
						this.$toast(res)
					}
					this.submitPendingFlag = false
				})
				.catch(() => {
					this.submitPendingFlag = false
				});
		},
	},
	created() {
		// console.log("url",decodeURIComponent(window.location.href.split('redirect=')[1]))
        // console.log('--------code',this.$util.getHashUrlQuery('code')); 
        // console.log('this.$route',this.$route.hash.slice(-1));

        var code = this.$util.getQueryName('code');

            console.log('code',code);
        
	},
	
};
</script>

<style lang="scss" scoped>
.page-login-index {
    height: 100vh;
    position: absolute;
    top: 0px;
    background-color:#F8F6F3;
    background: url('../assets/img/backgroundEnter.png') no-repeat center;
    background-size: cover;

    .name {
			font-size: 24px;
			font-weight: 500;
            margin-top: 120px;
            margin-left: 40px;
			// margin-top: 6px;
		}
	.form-wrapper {
		padding: 55px 20px 51px 20px;
		.row {
			margin-bottom: 19px;
      display: flex;
      justify-content: space-between;
			.input {
				// height: 44px;
				padding: 0 16px;
				// border: 1px solid #e9e9e9;
				// border-radius: 6px;
                
                    height: 51px;
                    background: #FFFFFF;
                    border-radius: 16px;
        width: 100%;
        box-sizing: border-box;
				&.valid {
					flex: 1;
          margin-right: 10px;
				}
			}
			.send-btn {
				width: 130px;
				height: 46px;
				line-height: 46px;
				text-align: center;
				color: #181A1A;
				background-color: #ffffff;
				border-radius: 16px;
				&.active {
					// color: #ffffff;
					// background-color: #5963f9;
				}
			}
		}
		.login-btn {
			margin-top: 55px;
			
			text-align: center;
			font-size: 16px;
			font-weight: 500;
			color: #FFE489;
			
			display: flex;
			// justify-content: center;
            width: 335px;
            height: 60px;
            line-height: 60px;
            background: #343434;
            border-radius: 30px;
            opacity: 0.3;
			&.active {
				color: #FFE489;
                opacity: 1;
				// background-color: #5963f9;
			}
            .loginIcon {
                display: inline-block;
                width: 110px;
                height: 60px;
            }
		}
        // .grayMask {
        //     width: 335px;
        //     height: 60px;
        //     border-radius: 30px;
        //     background-color: #343434;
        //     opacity: 0.3;
        //     margin-top: -60px;
        // }
		.login-loading {
			// margin-right: 5px;
		}
		.agreement-wrapper {
			position: absolute;
            bottom: 51px;
			text-align: center;
			color: #181A1A;
            
      display: flex;
      align-items: center;
      justify-content: center;
			.check {
				width: 20px;
				height: 20px;
        margin-right: 5px;
			}
			.rule {
				color: #181A1A;
                font-weight: 400;
			}
		}
	}
}
</style>